<template>
	<view class="store-info-page">
		<view class="setting-out">
			<view class="setting-item mt-bd">
				<view class="item-title">门店名称</view>
				<input style="flex: 1;" class="uni-input picker-tip" type="text" v-model='storeInfo.name'
					:maxlength="50" placeholder="请填写昵称" />
			</view>
			<view class="setting-item mt-bd">
				<view class="item-title">门店电话</view>
				<input class="uni-input picker-tip" v-model='storeInfo.tel' type="text" :maxlength="20"
					placeholder="请填写手机号码" />
			</view>
			<view class="setting-item mt-bd">
				<view class="item-title">门店地区</view>
				<view>
					<uni-data-picker :localdata="cityArr" :map="{text:'name',value:'name',children:'children'}"
						@change="regionChange">
						<view class="picker">
							<text
								style="color: #808080;">{{storeInfo.province}}{{storeInfo.city}}{{storeInfo.area}}</text>
							<text v-if="storeInfo.province === ''">请选择门店地区</text>
						</view>
					</uni-data-picker>
				</view>
			</view>
			<view class="setting-item mt-bd">
				<view class="item-title">详细地址</view>
				<textarea class="remark-textarea picker-tip" v-model="storeInfo.address" disable-default-padding
					:maxlength="100" auto-height placeholder="请填写地址" />
			</view>
			<view class="setting-item mt-bd">
				<view class="item-title">营业时间</view>
				<view class="time-box">
					<picker mode="time" value="hh:mm" @change="timeStartChange">
						<view class="picker-tip">{{storeInfo.startTime || '选择开始时间'}}</view>
					</picker>
					<text> 至 </text>
					<picker mode="time" value="hh:mm" @change="timeEndChange">
						<view class="picker-tip">{{storeInfo.endTime || '选择结束时间'}}</view>
					</picker>
				</view>
			</view>
			<view class="setting-item mt-bd">
				<view class="item-title">营业状态</view>
				<view>
					<radio-group class="myRadio" @change="storeRadioChange">
						<label style="margin-left: 20rpx;" v-for="(item,index) in storeState" :key="index">
							<radio :value="item.value" color="#ffd589" style="transform:scale(0.7)"
								:checked="item.checked" />{{item.name}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="setting-item mt-bd">
				<view class="item-long">美团授权状态</view>
				<view class="role-btn" v-if="mtRoleUrl">
					<uni-link :href="mtRoleUrl" :text="storeInfo.mtAuthStatus === '0'?'点击授权':'重新授权'"></uni-link>
				</view>
			</view>
			<view class="setting-item mt-bd">
				<view class="item-long">是否自动通电</view>
				<view>
					<switch color="#ffd589" @change="autoOpenChange" :checked="storeInfo.isAutoOpen" />
				</view>

			</view>
			<view class="setting-item mt-bd">
				<view class="item-long">是否自动巡检电源</view>
				<view>
					<switch color="#ffd589" @change="autoCheckChange" :checked="storeInfo.isAutoCheck" />
				</view>

			</view>
			<view class="setting-item mt-bd">
				<view class="item-long">大门设置</view>
				<view @click="toStoreDoor">点击设置 <uni-icons type="right" size="16"></uni-icons></view>
			</view>
			<view class="setting-item mt-bd">
				<view class="item-long">
					<view>门店LOGO</view>
					<view>建议尺寸：90px*90px,大小不超过5M</view>
				</view>
				<view class="img-box">
					<!-- @delete="(data)=>deletestoreImg(data,0)" -->
					<uni-file-picker :limit="1" :auto-upload="false" @select="(data)=>selectstoreImg(data,0)" 
						v-model="storeImg" fileMediatype="image" file-extname="png,jpg,jpeg"></uni-file-picker>
				</view>
			</view>
			<view class="mt-bd">
				<view class="item-long">
					<view>详情封面图</view>
					<view>建议尺寸：750px*394px,大小不超过5M</view>
				</view>
				<view class="store-img-box">
					<!--  @delete="(data)=>deletestoreImg(data,1)" -->
					<uni-file-picker :limit="6" :auto-upload="false" @select="(data)=>selectstoreImg(data,1)"
						v-model="storeDetailImg" fileMediatype="image" file-extname="png,jpg,jpeg"></uni-file-picker>
				</view>
			</view>
		</view>

		<view class="footer-box">
			<view class="footer-btn" @click="submitEvent">保存</view>
		</view>
	</view>
</template>

<script>
	import cityArr from '../../util/city.js'
	export default {
		data() {
			return {
				mtRoleUrl: '',
				storeInfo: {
					name: '',
					tel: '',
					startTime: '',
					endTime: '',
					image: '',
					province: '',
					city: '',
					area: '',
					address: '',
					businessStatus: '',
					mtAuthStatus: '',
					isAutoOpen: false,
					isAutoCheck: false
				},
				shopId: '',
				storeImg: [],
				storeDetailImg: [],
				storeState: [{
						value: '0',
						name: '营业中'
					},
					{
						value: '1',
						name: '打烊'
					}
				],
				provinceCityArea: [],
				cityArr: []
			};
		},
		methods: {
			// 选择门店状态
			storeRadioChange(event) {
				this.storeInfo.businessStatus = event.detail.value
			},
			// 否自动通电
			autoOpenChange(e) {
				this.storeInfo.isAutoOpen = e.detail.value
			},
			autoCheckChange(e) {
				this.storeInfo.isAutoCheck = e.detail.value
			},
			// 省市区选择器
			regionChange(e) {
				let regionArr = e.detail.value
				this.storeInfo.province = regionArr[0].value
				this.storeInfo.city = regionArr[1].value
				this.storeInfo.area = regionArr[2].value
			},
			// 时间选择器
			timeStartChange(e) {
				this.storeInfo.startTime = e.detail.value
			},
			timeEndChange(e) {
				this.storeInfo.endTime = e.detail.value
			},
			// 选择文件后触发
			selectstoreImg(data, type) {
				if (type === 0) {
					this.sentPicture(data.tempFilePaths[0], 0)
				} else if (type === 1) {
					this.sentPicture(data.tempFilePaths[0], 1)
				}

			},
			// 文件上传
			sentPicture(path, type) {
				let requestBaseUrl = sessionStorage.getItem('requestBaseUrl')
				let uploadurl = `${requestBaseUrl}/resource/app/oss/upload`
				uni.uploadFile({
					url: uploadurl,
					filePath: path,
					name: 'file',
					formData: {},
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						'clientId': uni.getStorageSync('clientId')
					},
					success: (res) => {
						let resData = JSON.parse(res.data)
						let obj = {
							url: resData.data.url,
							temPath: path
						}
						if (type === 0) {
							this.storeImg.push(obj)
						} else if (type === 1) {
							this.storeDetailImg.push(obj)
						}

					}
				});
			},
			// 删除照片
			// deletestoreImg(e, type) {
			// 	if(type === 0){
			// 		this.storeImg.forEach((item, index) => {
			// 			if (item.temPath === e.tempFilePath) {
			// 				this.storeImg.splice(index, 1)
			// 			}
			// 		})
			// 	}else if(type === 1){
			// 		this.storeDetailImg.forEach((item, index) => {
			// 			if (item.temPath === e.tempFilePath) {
			// 				this.storeDetailImg.splice(index, 1)
			// 			}
			// 		})
			// 	}
			// },
			// 跳转大门设置
			toStoreDoor() {
				uni.navigateTo({
					url: `/pages/store-door-setting/store-door-setting?shopId=${this.shopId}`
				})
			},
			// 获取门店信息
			getStoreInfo() {
				this.$request({
					method: 'get',
					url: `/applet/store/shop/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeInfo = res.data
					if (this.storeInfo.businessStatus === '0') {
						this.storeState[0].checked = true
					} else if (this.storeInfo.businessStatus === '1') {
						this.storeState[1].checked = true
					}
					if (this.storeInfo.image) {
						const obj = {
							url: this.storeInfo.image
						}
						this.storeImg.push(obj)
					}
					if (this.storeInfo.infoImage) {
						let arr = this.storeInfo.infoImage.split(',')
						arr.forEach((item) => {
							const obj = {
								url: item
							}
							this.storeDetailImg.push(obj)
						})
					}
					this.settingMtRole()
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 美团权限授权
			settingMtRole() {
				this.$request({
					method: 'get',
					url: `/applet/store/shop/getMtAuthUrl/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						this.mtRoleUrl = res.data
					}
				})
			},
			// 保存设置
			submitEvent() {
				if (!this.storeInfo.name) {
					uni.showToast({
						title: '请填写门店名称',
						duration: 2000,
						icon: 'none'
					})
				} else if (!this.storeInfo.tel) {
					uni.showToast({
						title: '请填写门店电话',
						duration: 2000,
						icon: 'none'
					})
				} else if (!this.storeInfo.province || !this.storeInfo.address)
					uni.showToast({
						title: '请完善门店地址信息',
						duration: 2000,
						icon: 'none'
					})
				else {
					this.saveUserData()
				}
			},
			// 保存门店信息
			saveUserData() {
				this.storeInfo.shopId = this.shopId
				if (this.storeImg.length > 0) {
					this.storeInfo.image = this.storeImg[0].url
				}
				if (this.storeDetailImg.length > 0) {
					let arr = []
					this.storeDetailImg.forEach((item) => {
						arr.push(item.url)
					})
					this.storeInfo.infoImage = arr.join(',')
				}
				const data = this.storeInfo
				this.$request({
					method: 'post',
					url: '/applet/store/shop/update',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.getStoreInfo()
			this.cityArr = cityArr
		}
	}
</script>

<style lang="scss" scoped>
	.store-info-page {
		padding-bottom: 180rpx;
		box-sizing: border-box;

		.img-box {
			display: flex;
			align-items: center;
			justify-content: center;

			::v-deep .file-picker__box {
				width: 200rpx !important;
				height: 200rpx !important;
			}
		}

		.myRadio {
			display: flex;
		}

		.mt-bd {
			border-top: 1px solid #EEE;
		}

		.setting-out {
			background-color: #FFF;
			border-radius: 10rpx;
			padding: 0 30rpx 30rpx 30rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
		}

		.store-img-box {
			margin-top: 20rpx;
		}

		.setting-header {
			align-items: center;
			padding: 0 !important;
		}

		.setting-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;

			.avatar-wrapper {
				border: none !important;
				padding: 0;
			}

			.user-img {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
				margin-top: 20rpx;
			}

			.picker-tip {
				color: #808080;
			}

			.uni-input {
				text-align: right;
			}

			.item-title {
				flex: 0 0 120rpx;
			}

			.item-long {
				flex: 0 0 180rpx;
			}

			.remark-textarea {
				width: 100%;
				font-size: 28rpx;
				padding-top: 4rpx;
				text-align: right;
			}
		}

		.time-box {
			display: flex;
			align-items: center;
		}

		::v-deep .uni-link {
			color: #FFF !important;
			text-decoration: none !important;
		}

		.role-btn {
			background: #ff9600;
			padding: 6rpx 10rpx;
			border-radius: 10rpx;
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 20rpx;
			box-sizing: border-box;
			background: #FFF;
			z-index: 999;
		}

		.footer-btn {
			font-size: 32rpx;
			text-align: center;
			padding: 30rpx 0;
			background: #ffd589;
			color: #FFF;
			border-radius: 40rpx;
			box-sizing: border-box;
			font-weight: bold;
		}
	}
</style>